<template>
  <div>
    <div id="divPlugin" class="plugin"></div>
    <el-button @click="clickLogin">开始登录</el-button>
    <el-button @click="clickStartRealPlay">开始预览</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        g_iWndIndex: 0,
        szDeviceIdentify: '',
        deviceport: '8000',
        channels: [],
        ip: '10.13.154.88',
        port: '80',
        username: 'admin',
        password: 'zzhy1234',
        iRtspPort: '554',
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      // 初始化
      init() {
        console.log(WebVideoCtrl.I_InitPlugin);
        // 初始化插件参数及插入插件
        WebVideoCtrl.I_InitPlugin(500, 300, {
          bWndFull: true, // 但窗口双击全屏
          iPackageType: 2, // 封装格式 无插件只能是2
          iWndowType: 2, // 分屏类型 1*1 2*2 ....
          bNoPlugin: true, // 开启无插件模式
          cbInitPluginComplete: function () {
            console.log('初始化成功！');
            WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin');
          },
        });
      },
      // 登录
      clickLogin() {
        var self = this;
        if ('' == self.ip || '' == self.port) {
          return;
        }
        debugger;
        self.szDeviceIdentify = self.ip + '_' + self.port;
        WebVideoCtrl.I_Login(self.ip, 1, self.port, self.username, self.password, {
          success: function (xmlDoc) {
            setTimeout(function () {
              console.log('登录成功');
              self.getChannelInfo();
              self.getDevicePort();
            }, 10);
            // setTimeout(function () {
            //   self.clickStartRealPlay();
            // }, 500);
          },
          error: function (status, xmlDoc) {
            console.log('登录失败');
          },
        });
      },

      // 获取模拟媒体通道
      getChannelInfo() {
        let self = this;
        if (!this.szDeviceIdentify) {
          return;
        }
        WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
          async: false,
          success: (xmlDoc) => {
            let oChannels = $(xmlDoc).find('VideoInputChannel');
            console.log('获取模拟通道成功222', oChannels);
            $.each(oChannels, function (i) {
              let id = $(this).find('id').eq(0).text();
              let name = $(this).find('name').eq(0).text();
              if (!name) {
                name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1);
              }
              self.channels.push({
                id: id,
                name: name,
              });
            });
            console.log(self.channels);
          },
          error: function (status, xmlDoc) {
            console.log('获取模拟通道失败1111', status, xmlDoc);
          },
        });
      },
      // 获取端口
      getDevicePort() {
        if (!this.szDeviceIdentify) {
          return;
        }
        var oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
        console.log('获取通道端口号111', oPort);
        if (oPort != null) {
          this.deviceport = oPort.iDevicePort;
          this.iRtspPort = oPort.iRtspPort;
        }
      },
      // 开始预览
      clickStartRealPlay() {
        let self = this;
        let oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
        let iChannelID = self.channels[0].id;
        if (!this.szDeviceIdentify) {
          return;
        }
        console.log(oWndInfo, parseInt(iChannelID, 10), parseInt(self.deviceport, 10), self.szDeviceIdentify);
        var startRealPlay = function () {
          WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
            iRtspPort: parseInt(self.deviceport, 10), // RTSP端口必须是int
            iStreamType: 1, // 码流类型：1-主码流 必须int
            iChannelID: parseInt(iChannelID, 10), // 播放通道 必须int
            bZeroChannel: false, // 是否播放零通道 默认false
            success: function () {
              console.log('预览成功');
            },
            error: function (status, xmlDoc) {
              console.log('预览失败', status, xmlDoc);
            },
          });
        };
        if (oWndInfo != null) {
          // 已经在播放了，先停止
          WebVideoCtrl.I_Stop({
            success: function () {
              startRealPlay();
            },
          });
        } else {
          startRealPlay();
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .plugin {
    width: 500px;
    height: 300px;
  }
</style>
